<template>
  <div class="story">
    <van-nav-bar
      title="泊友故事"
      left-arrow
      @click-left="onClickLeft"
    />
    <div v-html="item.boyu_tale" :class="yid==1?story_1:story_2"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      item:{},
      yid:this.$route.query.yid,
      story_1:'story_1',
      story_2:'story_2',
    };
  },
  mounted() {
    this.axios.get("/story",{
      params:{
        yid:this.$route.query.yid
      }
    }).then((res) => {
      this.item = res.data.results;
    });
  },
  methods: {
    onClickLeft(){
      this.$router.push('/');
    }
  },
};
</script>
<style>
.story_1>div{
  height:412px;
  background:url(http://vky-oss.inboyu.com/upload/39ecefcc-0f88-c38e-e5b0-86a0f3731f38.jpg);
  background-size:100% 100%;
  position: relative;
}
.story_1>div>strong{
  padding-left: 10px;
  position: absolute;
  bottom: 10px;
  font-size: 30px;
  color: #fff;
  font-weight: bolder;
  text-shadow:1px 1px 1px #666;
}
.story_2{
  padding-left:10px;
  padding-right:10px;
}
.story_2>div{
  font-size: 22px;
}
.story_2 p{
  margin: 0;
  padding-bottom: 8px;
  font-size: 17px;
  text-align: center;
}
img {
  max-width: 100%;
}
.van-nav-bar__title{
  font-weight:600;
  font-size:18px;
}
.van-icon{
  font-size:18px;
  color:#888 !important;
}
</style>